<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			body{
				background: url(img/bgi.jpg) no-repeat;
			}
			.box{
				width: 50%;
				height: 500px;
				margin: 30px auto;
			}
			.box .box-a{
				width: 570px;
				height: 100px;
				margin: 0 auto;
				text-align: center;
			}
			.box .box-a a{
				display: block;
				width: 187px;
				height: 50px;
				border: 1px solid gray;
				border-radius: 10px;
				float: left;
				text-decoration: none;
				text-align: center;
				line-height: 50px;
				color: orange;
				font-weight: bold;
			}
			.box .box-img{
				width: 570px;
				height: 350px;
				margin: 0 auto;
				overflow: hidden;
			}
			.box .box-img img{
				width: 570px;
				height: 350px;
			}
			a:hover{
				background-color: white;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box-a">
				<a href="#aa">新闻页面</a>
				<a href="#bb">娱乐页面</a>
				<a href="#cc">体育页面</a>
			</div>
			<div class="box-img">
				<img id="aa" src="img/1.jpg"/>
				<img id="bb" src="img/2.jpg"/>
				<img id="cc" src="img/3.jpg"/>
			</div>
		</div>	
	</body>
</html>
